import React from "react";
import { TouchableOpacity } from "react-native";
import { AntDesign } from "@expo/vector-icons";

export default function Back({ history, setHistory, setBoard }) {
    const handleBack = () => {
        if (history.length <= 1) return;
        const previousBoard = history[history.length - 2];
        setBoard(prevBoard => prevBoard.map((row, rowIndex) =>
            row.map((cell, colIndex) => 
                cell.isFixed ? cell : { 
                    ...cell, 
                    noteValue: previousBoard[rowIndex][colIndex].noteValue || [] 
                }
            )
        ));
        setHistory(prev => prev.slice(0, prev.length - 1));
            
    }

    return (
        <TouchableOpacity onPress={handleBack} disabled={history.length <= 1}>
            <AntDesign 
                name="arrowleft" 
                size={25} 
                color={history.length > 1 ? "black" : "gray"} 
            />
        </TouchableOpacity>
    )
}